<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="head_back pad30 row">
			<view class="disflex align_item_c minright20" @click="addshow = true">
				<image class="location" src="/static/image/location.png"></image>
				<text class="size26" style="color: #fff;">{{ add }}</text>
				<u-icon name="arrow-down-fill" color="#FFFFFF" size="13"></u-icon>
			</view>
			<!-- <view class="minau minright0 flex1">
				<u-search placeholder="请输入门店名搜索" v-model="search" actionText="搜索"
					@custom="$jump.nav('/indexpackage/user/search?search=' + search)"
					@search="$jump.nav('/indexpackage/user/search?search=' + search)" :showAction="true"
					:animation="true" height="30"></u-search>
			</view> -->
		</view>
		<view class="empty" style="margin-top: 100rpx;padding-bottom: 100rpx;" v-if="!loadmore">
			<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
		<view class="min30 column" v-else>
			<view class="pad20 background_f rad2 column minbottom30" v-for="(item,index) in list" :key="index"
				@click="$jump.nav('/indexpackage/user/store_info?stores_id=' + item.stores_id)">
				<view class="row">
					<image :src="item.stores_logo" mode="" class="rad1" style="width: 100rpx;height: 100rpx;"></image>
					<view class="column flex1 minleft20">
						<view class="col3 font600 size28 row">

							<view class="size26 col3 font500 flex1 omit1">
								{{ item.stores_name }}
							</view>
							<!-- <u-icon name="arrow-right" color="#333" size="14"></u-icon> -->
							<view class="minau minright0 size22 col6 font500">
								距离{{ item.distance }}
							</view>
						</view>
						<view class="minto minbottom0 size26 col6 font500 omit1">
							地址：{{ item.stores_address }}
						</view>
					</view>
				</view>
				<view class="row mintop30">
					<view class="img" v-for="img_item in item.products">
						<image :src="img_item.product_cover" mode="" class="rad1" style="width: 180rpx;height: 180rpx;">
						</image>
					</view>
				</view>
			</view>
			<view style="margin-top: 50rpx;"><u-loadmore :status="status" /></view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from "@/tool/qqmap-wx-jssdk.js"
	export default {
		data() {
			return {
				add: '',
				addshow: false,
				search: '',
				latitude: '',
				longitude: '',
				page: 1,
				status: 'nomore',
				loadmore: [],
				list: []
			}
		},

		onLoad() {
			
			
			
			
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			const token = uni.getStorageSync('token');
			if (token) {

				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 10 // 滚动动画时长，默认300ms
				// });
				this.getLocationInfo()
			} else {
				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		onReachBottom() {
			if (this.page < 0) return;
			this.status = 'loading';
			this.page = ++this.page
			this.getStoreList()
			setTimeout(() => {
				console.log(this.loadmore);
				if (this.loadmore.length == 0) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			getLocationInfo() {
				//获取位置信息
				var _this = this
				let location = {
					longitude: 0,
					latitude: 0,
					province: "",
					city: "",
					area: "",
					street: "",
					address: "",
				}
				uni.getLocation({
					type: "gcj02",
					success(res) {
						location.longitude = res.longitude;
						location.latitude = res.latitude;
						// 腾讯地图Api
						const qqmapsdk = new QQMapWX({
							key: 'V6CBZ-5K4CX-3WX4O-Z2BWQ-SXHMJ-UPB6C' //这里填写自己申请的key
						});
						// 使用腾讯地图api
						qqmapsdk.reverseGeocoder({
							location,
							success(response) {
								let info = response.result;
								// 注意查看打印信息
								console.log('获取位置信息', info);
								_this.add = info.address_component.city + info.address_component.district
								_this.latitude = info.location.lat
								_this.longitude = info.location.lng
								if(_this.latitude && _this.longitude) {
									_this.page = 1
									_this.getStoreList()
								}
							},
						});
					},
					fail(err) {
						console.log(err)
					},
				});
			},
			async getStoreList() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("home/distance", {
					latitude: this.latitude,
					longitude: this.longitude,
					page: this.page
				})
				if (code == 200) {
					if (this.page != 1) {
						this.loadmore = data.items
						for (var i = 0; i < data.items.length; i++) {
							this.list.push(data.items[i]); // 加载的数据追加在上一页后面
						}
					} else {
						this.loadmore = data.items
						this.list = data.items
					}
				} else if (code == 500) {
					this.list = data
					this.loadmore = data
				} else {
					console.log(message);
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.head_back {
		background: linear-gradient(63deg, #FF515E 0%, #FF7F3E 100%), linear-gradient(167deg, #FF6B4A 0%, rgba(255, 123, 77, 0) 100%);

		.location {
			width: 50rpx;
			height: 48rpx;
		}
	}

	.img {
		width: 33%;

		&:nth-child(2) {
			// margin: auto;
		}
	}
</style>